<template>
  <div class="container padbottom">
    <div class="content">
      <div v-if="source == 'T10013'" class="box">
        <h4>后续节点</h4>
        <van-checkbox-group v-model="result" direction="horizontal">
          <van-checkbox
            shape="square"
            @click="chooseResult(item.nodeId)"
            v-for="item in nodes"
            :key="item.nodeId"
            icon-size="14px"
            checked-color="#009966"
            :name="item.nodeId"
            :disabled="item.disable"
            >{{ item.nodeName }}</van-checkbox
          >
          <!-- <van-checkbox
            shape="square"
            icon-size="14px"
            checked-color="#009966"
            name="b"
            >架构审核</van-checkbox
          >
          <van-checkbox
            shape="square"
            icon-size="14px"
            checked-color="#009966"
            name="c"
            disabled
            >禁用重新确认需求</van-checkbox
          >
          <van-checkbox
            shape="square"
            icon-size="14px"
            checked-color="#009966"
            name="d"
            >后续节点四</van-checkbox
          > -->
        </van-checkbox-group>
      </div>
      <div v-else class="box">
        <h4>后续节点</h4>
        <van-radio-group
          v-model="radio"
          @change="chooseRadio"
          direction="horizontal"
        >
          <van-radio
            v-for="item in nodes"
            :key="item.nodeId"
            icon-size="14px"
            checked-color="#009966"
            :name="item.nodeId"
            >{{ item.nodeName }}</van-radio
          >
        </van-radio-group>
      </div>
      <div v-if="showUser == true" class="box">
        <van-field
          v-model="user"
          label="硬件确认人"
          input-align="right"
          label-class="labelColor"
          @click="getOption"
          placeholder="选择"
          is-link
          readonly
          arrow-direction="down"
        />
      </div>
      <div class="box">
        <h4>审批意见</h4>
        <van-field
          v-model="message"
          rows="5"
          autosize
          label=""
          type="textarea"
          placeholder="请输入留言"
        />
      </div>
    </div>
    <van-popup position="bottom" get-container="body" v-model="showOption">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirmOption"
        @cancel="showOption = false"
      />
    </van-popup>
    <div class="form-btn">
      <div class="btn btn-color1" @click="goback">返回</div>
      <div class="btn btn-color3" @click="submit">办理完成</div>
    </div>
    <goback></goback>
  </div>
</template>

<script>
import {
  serviceNode,
  serviceNodeSubmit,
  nodeApprover,
  customApprover,
  reqConfirm,
  userAcceptance,
  onlineInfo,
} from "@/api/service.js";
import { Toast } from "vant";
import Goback from "@/components/goback.vue";
let isSubmit = false;
export default {
  components: {
    Goback,
  },
  data() {
    return {
      text: "",
      showUser: false, //是否选择审批人
      result: [],
      radio: "",
      showOption: false,
      optionData: "",
      columns: [],
      message: "",
      users: "", //审批人合集
      user: "", //硬件确认人
      userId: "", //审批人id
      id: "", //服务单id
      source: "", //来源
      nodes: "", //后续节点
      jgsh: true, //架构审核是否被勾选
      sourceType: [], //需求汇总资源类型
      chooseType: [], //需求汇总
      backInfo: [], //退回标识
      idGroup: [],
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.source = this.$route.query.source;
    this.sourceType = this.$route.query.sourceType
      ? this.$route.query.sourceType
      : [];
    this.sourceTypeId = this.$route.query.sourceTypeId
      ? this.$route.query.sourceTypeId
      : [];
    this.backInfo = this.$route.query.backInfo
      ? this.$route.query.backInfo
      : [];
    this.idGroup = this.$route.query.idgroup ? this.$route.query.idgroup : [];
    // this.showUser = this.$route.query.showUser;
    this.getData();
  },
  methods: {
    //后续节点
    chooseResult(name) {
      //需求分解节点处理方式
      if (this.source == "T10013") {
        if (!this.jgsh) {
          if (this.backInfo.ggtopl == 0) {
            if (name != "T10077") {
              if (name == "T10305") {
                this.result = ["T10305"];
              } else {
                this.result = [];
                for (let i = 0; i < this.nodes.length; i++) {
                  if (
                    this.nodes[i].nodeId != "T10305" &&
                    this.nodes[i].nodeId != "T10077"
                  ) {
                    this.result.push(this.nodes[i].nodeId);
                  }
                }
              }
            }
          }
        } else {
          if (this.backInfo.ggtopl == 0) {
            for (let i = 0; i < this.nodes.length; i++) {
              if (this.nodes[i].nodeId != "T10305") {
                this.result.push(this.nodes[i].nodeId);
              }
            }
          }
        }
      }
    },
    //后续节点单选
    chooseRadio() {
      console.log(this.radio);
      if (this.radio == "T10335") {
        this.showUser = true;
      } else {
        this.showUser = false;
      }
      if (this.source == "T10067") {
        customApprover({
          server_id: this.id,
          next_point: this.radio,
        }).then((res) => {
          if (res.code != 200) {
            Toast(res.message);
          }
        });
      }
    },
    //硬件审批人选项
    getOption() {
      this.showOption = true;
      // assessUsers({
      //   server_id: this.id,
      // }).then((res) => {
      //   console.log(res);
      //   if (res.code == 200) {
      //     for (var i = 0; i < res.data.length; i++) {
      //       this.users = res.data;
      //       this.columns.push(res.data[i].name);
      //     }
      //   }
      // });
      // 硬件确认人
      nodeApprover().then((res) => {
        console.log(res);
        if (res.code == 200) {
          for (var i = 0; i < res.data.length; i++) {
            this.users = res.data;
            this.columns.push(res.data[i].username);
          }
        }
      });
    },
    onConfirmOption(value, index) {
      console.log(value, index);
      this.userId = this.users[index].user_id;
      this.user = value;
      this.showOption = false;
    },
    submit() {
      console.log(this.result);
      if (this.radio == "T10335" && this.userId == "") {
        Toast("请选择硬件确认人");
        return;
      }
      if (this.message) {
        if (isSubmit) {
          Toast("正在提交请稍候");
        } else {
          isSubmit = true;
          let node_id;
          if (this.source == "T10013") {
            node_id = this.result.join(",");
          } else if (this.source == "T10067") {
            node_id = "T10294";
          } else {
            node_id = this.radio;
          }
          // 【需求分析审核（T10347）（T10091）】如果选择返回需求分析，则需要勾选需要回退的需求。
          if (this.source == "T10347" || this.source == "T10091") {
            if (this.radio == "T10088") {
              if (this.idGroup.length == 0) {
                Toast("请选择需要回退的需求");
                isSubmit = false;
                return;
              } else {
                reqConfirm({
                  server_id: this.id,
                  doc_id: this.idGroup.join(","),
                }).then((res) => {
                  if (res.code != 200) {
                    Toast(res.message);
                    isSubmit = false;
                    return;
                  }
                });
              }
            }
          }
          // 【需求实施审核（T10351）（T10093）】如果选择返回需求实施，则需要勾选需要回退的需求。
          if (this.source == "T10351" || this.source == "T10093") {
            if (this.radio == "T10120") {
              if (this.idGroup.length == 0) {
                Toast("请选择需要回退的需求");
                isSubmit = false;
                return;
              } else {
                userAcceptance({
                  server_id: this.id,
                  doc_id: this.idGroup.join(","),
                }).then((res) => {
                  if (res.code != 200) {
                    Toast(res.message);
                    isSubmit = false;
                    return;
                  }
                });
              }
            }
          }

          // 准备发布审核（T10355） +  需求上线确认（T10107）节点，勾选上线信息  进行回退。
          if (this.source == "T10355" || this.source == "T10107") {
            if (this.radio == "T10104") {
              if (this.idGroup.length == 0) {
                Toast("请选择需要回退的需求");
                isSubmit = false;
                return;
              } else {
                onlineInfo({
                  server_id: this.id,
                  doc_id: this.idGroup.join(","),
                }).then((res) => {
                  if (res.code != 200) {
                    Toast(res.message);
                    isSubmit = false;
                    return;
                  }
                });
              }
            }
          }

          setTimeout(() => {
            serviceNodeSubmit({
              server_id: this.id,
              target_node_id: node_id, //目标节点
              user_id: this.userId, //选择硬件确认人
              remark: this.message,
              current_node_id: this.source, //当前提交节点
            }).then((res) => {
              if (res.code == 200) {
                Toast(res.message);
                // this.$router.back();
                this.$router.push({
                  path: "/Service",
                });
              }
              isSubmit = false;
            });
          }, 100);
        }
      } else {
        Toast("请输入审批意见");
        isSubmit = false;
      }
    },
    goback() {
      this.$router.back();
    },
    getData() {
      if (localStorage.getItem("checkboxGroup") != "") {
        this.jgsh = true;
      } else {
        this.jgsh = false;
      }
      if (this.source == "T10067") {
        this.nodes = [
          {
            nodeId: "1",
            nodeName: "需求评估汇总",
          },
          {
            nodeId: "2",
            nodeName: "网络处硬件评估",
          },
          {
            nodeId: "3",
            nodeName: "返回系统工作量评估",
          },
          {
            nodeId: "4",
            nodeName: "返回需求分解",
          },
        ];
      } else {
        serviceNode({
          server_id: this.id,
        }).then((res) => {
          console.log(res);
          if (res.code == 200) {
            if (this.source == "T10107") {
              for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].nodeId == "T10320") {
                  res.data.splice(i, 1);
                }
              }
            }
            //【需求分析（T10088）】需求分析节点，如果 if_one_system_manager 字段为 true，则 节点提交展示： 需求分析审核（T10347）、需求管理岗确认（需求分析）（T10091）两个节点；显示为false，则显示：需求分析审核（T10347） 节点
            if (this.source == "T10088") {
              if (this.backInfo.if_one_system_manager == 1) {
                for (let i = 0; i < res.data.length; i++) {
                  if (
                    res.data[i].nodeId != "T10347" ||
                    res.data[i].nodeId != "T10091"
                  ) {
                    res.data.splice(i, 1);
                  }
                }
              } else if (this.backInfo.if_one_system_manager == 0) {
                for (let i = 0; i < res.data.length; i++) {
                  if (res.data[i].nodeId != "T10347") {
                    res.data.splice(i, 1);
                  }
                }
              }
            }
            //【需求实施（T10120）】如果 pzsx = 1 ,   则显示 需求评估汇总节点（T10017），反之隐藏该节点；如果 if_one_system_manager 字段为 1，则显示  需求管理岗确认（用户验收）（T10093），反之不显示
            if (this.source == "T10120") {
              if (this.backInfo.pzsx != 1) {
                for (let i = 0; i < res.data.length; i++) {
                  if (res.data[i].nodeId == "T10017") {
                    res.data.splice(i, 1);
                  }
                }
              }
              if (this.backInfo.if_one_system_manager != 1) {
                for (let i = 0; i < res.data.length; i++) {
                  if (res.data[i].nodeId == "T10093") {
                    res.data.splice(i, 1);
                  }
                }
              }
            }

            //准备发布（T10104）if_one_system_manager  =  1  ，节点显示 需求上线确认（T10107），反之隐藏
            if (this.source == "T10104") {
              if (this.backInfo.if_one_system_manager != 1) {
                for (let i = 0; i < res.data.length; i++) {
                  if (res.data[i].nodeId == "T10107") {
                    res.data.splice(i, 1);
                  }
                }
              }
            }
            //需求评估汇总审核  不能直接流转到“创建实施需求”流程节点，隐藏即可
            if (this.source == "T10018") {
              for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].nodeId == "T10086") {
                  res.data.splice(i, 1);
                }
              }
            }
            //需求评估汇总  需求汇总的时候资源类型有项目交付型，就把创建实施需求隐藏
            if (
              this.source == "T10017" &&
              this.sourceTypeId.indexOf("2") == -1
            ) {
              for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].nodeId == "T10086") {
                  res.data.splice(i, 1);
                }
              }
            }
            if (this.source == "T10013") {
              for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].nodeId == "T10067") {
                  res.data.splice(i, 1);
                }
                // 从选择项目负责人节点返回的需求分解 ggtopl  =>  1（true）， 界面隐藏 系统工作量评估节点（T10015），只展示 架构审核（T10077）+选择项目负责人（T10340），选择项目负责人 可以自行选择
                if (this.backInfo.ggtopl == 1) {
                  if (res.data[i].nodeId == "T10015") {
                    res.data.splice(i, 1);
                  }
                  if (res.data[i].nodeId == "T10305") {
                    res.data.splice(i, 1);
                  }
                }
                // 从选择项目负责人节点返回的需求分解 ggtofj   => 1 (true)，界面隐藏 选择项目负责人（T10340），只展示 架构审核（T10077）+ 系统工作量评估节点（T10015），默认选中
                if (this.backInfo.ggtofj == 1) {
                  if (res.data[i].nodeId == "T10340") {
                    res.data.splice(i, 1);
                  }
                }
              }
              for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].nodeId == "T10077" && !this.jgsh) {
                  res.data[i].disable = true;
                }
                if (this.jgsh) {
                  if (res.data[i].nodeId == "T10305") {
                    res.data[i].disable = true;
                  } else {
                    if (this.backInfo.ggtopl != 1) {
                      this.result.push(res.data[i].nodeId);
                    }
                  }
                }
              }
            }
            console.log(this.result);
            this.nodes = res.data;
            if (this.source != "T10013" && this.nodes.length == 1) {
              this.radio = this.nodes[0].nodeId;
            }
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
template,
.container {
  width: 100%;
  min-height: 100vh;
  background: #f7f9f9;
  &.padbottom {
    padding-bottom: 70px;
    box-sizing: border-box;
  }
  .content {
    padding: 0 18px;
    background: #ffffff;
    .box {
      padding: 18px 0;
      border-bottom: 1px solid #eceef4;
      h4 {
        color: rgba(49, 53, 65, 0.6);
        font-size: 15px;
        line-height: 1.5;
        font-weight: normal;
      }
    }
    /deep/.labelColor {
      color: rgba(49, 53, 65, 0.6);
    }
    /deep/.van-field__control {
      color: #313541;
    }
    /deep/.van-checkbox {
      margin-top: 18px;
      margin-right: 20px;
      .van-checkbox__label {
        color: #313541;
        font-size: 15px;
      }
      .van-checkbox__label--disabled {
        color: rgba(49, 53, 65, 0.6);
      }
    }
    /deep/.van-radio-group {
      .van-radio {
        margin-top: 18px;
        margin-right: 20px;
        .van-radio__label {
          color: #313541;
          font-size: 15px;
        }
      }
    }
    /deep/textarea.van-field__control {
      margin-top: 18px;
    }
  }
  .form-btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background: #fff;
    height: 34px;
    padding: 13px 15px;
    padding-bottom: calc(13px + env(safe-area-inset-bottom));
    .btn {
      flex: 1;
      height: 34px;
      line-height: 34px;
      text-align: center;
      font-size: 14px;
      margin-right: 6px;
      border-radius: 5px;
      &:last-child {
        margin-right: 0;
      }
    }
    .btn-color1 {
      background: rgba(147, 157, 173, 0.18);
      color: #313541;
    }
    .btn-color3 {
      background: #009966;
      color: #fff;
    }
  }
}
</style>